<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
  <style>

  </style>
</head>

<body>
  <div id='root'>
    <div>
      {{msg}}
    </div>
    <!-- 绑定emit事件 -->
    <!-- <a-container @put='handler' :text='msg'/> -->
    <a-container :text.sync='msg' />
  </div>

  <script>
    Vue.component('a-container', {
      template: `<div>我是a组件 
                                <input v-model='value'/>
                                <div>a组件内 ===>{{ text }}</div>
                                <div><button @click='put'>给我上去</button></div>
                        </div>`,
      props: ['text'],
      data() {
        return {
          value: ''
        }
      },
      methods: {
        put() {

          // * 事件名称
          // this.$emit('put',this.value)
          // this.msg = 123;
          // * （ update: props的名字 ）
          this.$emit('update:text', this.value);
        }
      }
    })

    // * 子往父传值
    let vm = new Vue({
      el: '#root',
      data: function () {
        return {
          msg: '初始值'
        }
      },
      methods: {
        // handler(v){
        //     this.msg = v;
        // }
      },
      computed: {

      }
    })

  </script>
</body>

</html>
